<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>水果店收银系统</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<style>
  body {
    font-family: Arial, sans-serif;
  }
  .container {
    max-width: 600px;
    margin: auto;
    padding: 20px;
  }
  input[type="number"] {
    width: calc(100% - 22px);
    padding: 10px;
    margin-bottom: 15px;
  }
  button {
    padding: 10px 20px;
    cursor: pointer;
  }
</style>
</head>
<body>
<div id="app" class="container">
  <h1>欢迎光临 Vue开发的收银系统_水果店</h1>
  <h3>苹果 {{ price }}￥/斤，折扣：<span v-if="discount">{{ discount }}折</span></h3>
  
  <input type="number" min="0" step="any" placeholder="请输入你要购买的斤数" v-model.number="quantity">

  <button @click="calculatePrice">结账买单~</button>

  <div v-if="totalPrice > 0">
    结账单：总价: {{ totalPrice }}元 折后价: {{ discountedPrice }}元 省了: {{ savedAmount }}元
  </div>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    price: 10,
    discountRate: 0.8, 
    quantity: null,
    totalPrice: 0,
    discountedPrice: 0,
    savedAmount: 0
  },
  computed: {
    discount() {
      return this.discountRate * 10; 
    }
  },
  methods: {
    calculatePrice() {
      if (!this.quantity || this.quantity <= 0) {
        alert('请输入正确的购买数量');
        return;
      }

      this.totalPrice = this.price * this.quantity;
      this.discountedPrice = this.totalPrice * this.discountRate;
      this.savedAmount = this.totalPrice - this.discountedPrice;
    }
  }
});
</script>
</body>
</html>
